<template>
  <div class="rentOrder component actWrap">
    <!-- <tab :line-width="2" :animate="false">
      <tab-item @on-item-click="onItemClick" selected>全部</tab-item>
      <tab-item @on-item-click="onItemClick">待确认</tab-item>
      <tab-item @on-item-click="onItemClick">待签约</tab-item>
      <tab-item @on-item-click="onItemClick">待付款</tab-item>
      <tab-item @on-item-click="onItemClick">已完成</tab-item>
    </tab> -->
    <button-tab :line-width="2" :animate="false">
      <button-tab-item @on-item-click="onItemClick" selected>待付款</button-tab-item>
      <button-tab-item @on-item-click="onItemClick">已过期</button-tab-item>
      <button-tab-item @on-item-click="onItemClick">已完成</button-tab-item>
    </button-tab>
   <loading :show="loadingShow"></loading>
    <!-- 待付款 -->
    <div class="order-list" v-if="tabIdx === 0">
      <div class="order-list-item" v-for="(item, index) in orderList" :key="index">
        <div class="renter-head">
          <span>
            <img class="head-img" width="100%" :src="item.headImgUrl || require('../../../images/avatar_default.png')" alt="">
            <span>{{item.renterName}}&nbsp;</span>
          </span>
        </div>
        <div class="renter-content">
          <p><span>订单编号：</span> <span>{{item.orderNo}}</span></p>
          <p><span>生成时间：</span> <span>{{(new Date(item.createTime && item.createTime.replace(/-/g, '/'))).Format('yyyy-MM-dd h:m')}}</span></p>
        </div>
      </div>
      <no-data v-show="orderList.length === 0"><span slot="message">您还没有订单信息哦~</span></no-data>
    </div>
    <!-- 已过期 -->
    <div class="order-list" v-if="tabIdx === 1">
      <div class="order-list-item" v-for="(item, index) in orderList" :key="index">
        <div class="renter-head">
          <span>
            <img class="head-img" width="100%" :src="item.headImgUrl || require('../../../images/avatar_default.png')" alt="">
            <span>{{item.renterName}}&nbsp;</span>
          </span>
        </div>
        <div class="renter-content">
          <p><span>订单编号：</span> <span>{{item.orderNo}}</span></p>
          <p><span>生成时间：</span> <span>{{(new Date(item.createTime && item.createTime.replace(/-/g, '/'))).Format('yyyy-MM-dd h:m')}}</span></p>
        </div>
      </div>
      <no-data v-show="orderList.length === 0"><span slot="message">您还没有订单信息哦~</span></no-data>
    </div>
    <!-- 已完成 -->
    <div class="order-list" v-if="tabIdx === 2">
      <div class="order-list-item" v-for="(item, index) in orderList" :key="index">
        <div class="renter-head">
          <span>
            <img class="head-img" width="100%" :src="item.headImgUrl || require('../../../images/avatar_default.png')" alt="">
            <span>{{item.renterName}}&nbsp;</span>
          </span>
        </div>
        <div class="renter-content">
          <p><span>订单编号：</span> <span>{{item.orderNo}}</span></p>
          <p><span>生成时间：</span> <span>{{(new Date(item.createTime && item.createTime.replace(/-/g, '/'))).Format('yyyy-MM-dd h:m')}}</span></p>
        </div>
      </div>
      <no-data v-show="orderList.length === 0"><span slot="message">您还没有订单信息哦~</span></no-data>
    </div>
  
  </div>
</template>
<script>
  import {Confirm, Loading, TransferDomDirective as TransferDom} from 'vux'
  import noData from '@/components/noData'
  import contract from '@/components/contract'
  export default {
    directives: {
      TransferDom
    },
    components: {
      noData,
      Confirm,
      Loading,
      contract
    },
    data () {
      return {
        loadingShow: false,
        tabIdx: 0,
        orderId: 0,
        orderStatus: '',
        orderList: [],
        page: 1,
        showConfirm: false,
        orderInfo: {
          housePersons: {},
          landlord: {},
          order: {},
          render: {},
          apartment: {},
          romm: {},
          renter: {
            mobile: '',
            trueName: ''
          }
        },
        userInfo: JSON.parse(localStorage.getItem('userInfo')),
        showDialog: false// 签约提示框
      }
    },
    created () {
      // 全部
      this.getData(this.tabIdx, '1')
    },
    methods: {
      // 订单状态：1-待确认；3-待租客签约；4-待租客支付；5-已完成；99-已关闭
      // this.userInfo.id
      getData (idx, status) {
        this.orderStatus = status
        this.$axiosPosting(this.$api.landlordOrders, {
          page: this.page,
          landlordId: this.userInfo.id,
          pageSize: '1000',
          status
        }).then(json => {
          if (json.code === '0000' && json.data && json.data.length > 0) {
            this.$vux.loading.hide()
             // 处理公寓房源数据
            this.orderList = json.data instanceof Array ? json.data : []
          }
        })
      },
      onItemClick (index) {
        this.tabIdx = index
        // this.getData(index, '2')
        if (index === 0) {
          this.getData(index, '1')
        } else if (index === 1) {
          this.getData(index, '3')
        } else if (index === 2) {
          this.getData(index, '2')
        }
        this.$vux.loading.show({
          text: 'Loading'
        })
        // if (this.orderList[index].length === 0) {
        //   switch (index) {
            /* // 全部
            case 0: this.getData(index, ''); break
            // 待确认
            case 1: this.getData(index, '1'); break
            // 待租客签约
            case 2: this.getData(index, '3'); break
            // 待租客付款
            case 3: this.getData(index, '4'); break
            // 已完成
            case 4: this.getData(index, '5'); break */
            // 待付款
        //     case 0: this.getData(index, '1'); break
        //     // 已过期
        //     case 1: this.getData(index, '3'); break
        //     // 已完成
        //     case 2: this.getData(index, '2'); break
        //   }
        // }
      },
      // 同意
      // agree (orderType, orderId) {
      //   // 订单类型：1-普通订单；2-续租订单；3-退租订单
      //   if (orderType === 2) {
      //     this.$router.push({ name: 'renewOrder', params: { orderId } })
      //   } else if (orderType === 3) {
      //     this.$router.push({ name: 'cancelOrder', params: { orderId } })
      //   } else {
      //     this.$router.push({ name: 'landlordOrderDetail', params: { orderId } })
      //   }
      //   this.showDialog = true
      // },
      // // 拒绝
      // refuse (orderId) {
      //   this.showConfirm = true
      //   this.orderId = orderId
      // },
      // // 取消订单
      // cancelOrder () {
      //   this.showConfirm = false
      //   this.$axiosPosting(this.$api.cancelOrder, {
      //     orderId: this.orderId
      //   }).then(json => {
      //     if (json.code === '0000') {
      //       this.$vux.toast.text('拒绝签约成功', 'middle', 15000)
      //       this.getData(this.tabIdx, this.orderStatus)
      //     }
      //   })
      // },
      transOrderStatus (status) {
        let statusTxt = ''
        switch (status) {
          case 1: statusTxt = '待确认'; break
          case 3: statusTxt = '待租客签约'; break
          case 4: statusTxt = '待租客付款'; break
          case 5: statusTxt = '已完成'; break
          default: statusTxt = '已关闭'; break
        }
        return statusTxt
      }
      // @click.native="contactLandlor(item.webUser.id)" 联系租客
      // contactLandlor (landlordId) {
      //   let virtualNum = ''
      //   let mobileTo = ''
      //   this.$axiosPosting(this.$api.getUserById, {userId: landlordId}).then(res => {
      //     if (res.code === '0000') {
      //       mobileTo = res.data.mobile
      //       step2()
      //     }
      //   })
        // const step2 = () => {
        //   let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
        //   let mobileFor = userInfo ? userInfo.mobile : ''
        //   if (mobileFor) {
        //     if (virtualNum === '') {
        //       this.$axiosPosting(this.$api.getVirtualNum, {mobileFor, mobileTo}).then(res => {
        //         let data = ''
        //         if (res.code === '0000') {
        //           data = JSON.parse(res.data)
        //         }
        //         if (res.code === '0000' && data.errorCode === '0') {
        //           virtualNum = data.virtualNum
        //           window.location.href = `tel:${virtualNum}`
        //         } else {
        //           this.$vux.toast.text('无法获取房东电话')
        //           virtualNum = ''
        //         }
        //       })
        //     } else {
        //       window.location.href = `tel:${virtualNum}`
        //     }
        //   } else {
        //     this.$router.replace('/login')
        //   }
        // }
      // }
    }
  }
</script>

<style lang="less" scoped>
.vux-button-group {
  padding: 0 15px;
  margin-bottom: 0;
  a.vux-button-tab-item-first {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    &::after {
      border: 1px solid #d0d0d0;
      border-right: 0;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
  }
  a.vux-button-tab-item-middle:after {
    border: 1px solid #d0d0d0;
  }
  a.vux-button-tab-item-last {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    &::after {
      border: 1px solid #d0d0d0;
      border-left: 0;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }
}
.rentOrder {
  .order-list-item {
    position: relative;
    padding: .6rem .75rem;
    background: #fff;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 6px;
      background-color: #f4f4f4;
    }
  }
  .head-img {
    margin-right: 7px;
    width: 25px;
    border-radius: 50%;
    vertical-align: top;
  }
  .head-btn {
    font-size: 14px;
    color: #a8a8a8;
  }
  .renter-head {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 24px;
    color: #000;
    text-align: justify;
    text-align-last: justify;
    span {
      display: inline-block;
    }
  }
  .renter-content {
    padding-bottom: 5px;
    font-size: 12px;
    line-height: 24px;
    color: #777;
    p {
      text-align: justify;
      text-align-last: justify;
    }
    span {
      display:inline-block;
    }
  }
}
</style>

<style lang="less">
  .rentOrder {
    // padding-top: 44px;
    // .vux-tab {
    //   position: fixed;
    //   top: 0;
    //   left: 0;
    //   right: 0;
    //   z-index: 99;
    //   .vux-tab-selected {
    //     border-bottom-style: solid;
    //   }
    // }
    // .order-list {
    //   font-size: .8rem;
    //   background: #f4f4f4;
    //   .order-list-item {
    //     position: relative;
    //     margin-bottom: .3rem;
    //     background: #fff;
    //     border-bottom: 0.5px solid #f4f4f4;
    //     .list-item-renter {
    //       padding: .6rem .75rem;
    //       border-bottom: 0.5px solid #f4f4f4;
    //       .renter-msg-left {
    //         font-size: 15px;
    //         line-height: 24px;
    //         color: #000;
    //         .order-type {
    //           padding: 2px 6px;
    //           font-size: 10px;
    //           line-height: 1;
    //           color: #fff;
    //           background: #097dde;
    //           border-radius: 3px;
    //           vertical-align: 1px;
    //         }
    //         .order-type-cancel {
    //           background: #d4323f;
    //         }
    //         .status {
    //           float: right;
    //           font-size: .5rem;
    //           color: #777;
    //         }
    //       }
    //       .renter-msg-button {
    //         display: flex;
    //         font-size: 12px;
    //         line-height: 24px;
    //         color: #777;
    //         span {
    //           flex: 1 0 auto;
    //         }
    //         span:nth-of-type(2) {
    //           flex-grow: 0;
    //         }
    //       }
    //     }
    //     .btn-wrap {
    //       position: relative;
    //       padding: .5rem .75rem;
    //       font-size: 0;
    //       text-align: right;
    //       &:after {
    //         content: '';
    //         position: absolute;
    //         top: 0;
    //         left: 0;
    //         right: 0;
    //         border-top: .5px solid #f4f4f4;
    //       }
    //       .weui-btn_mini {
    //         width: 3.5rem;
    //         margin-top: 0;
    //         margin-left: .5rem;
    //         padding: 0;
    //         font-size: 14px;
    //         line-height: 30px;
    //         color: #777;
    //         border-color: #777;
    //         border-radius: 3px;
    //       }
    //     }
    //     &:last-child {
    //       margin-bottom: 0;
    //     }
    //   }
    // }
    // .ui-house-li {
    //   padding: .75rem .75rem .75rem 0;
    //   .house {
    //     padding: 0;
    //   }
    // }
  }
  .confirm-order-refuse {
    .weui-dialog {
      overflow: visible;
    }
    .weui-dialog__bd {
      font-size: 17px;
      color: #000;
    }
    .weui-dialog__btn_default {
      color: #ff9600;
      background: #fff !important;
      border-top: 1px solid #f4f4f4;
    }
    .btn-close {
      position: absolute;
      left: 50%;
      bottom: -60px;
      width: 36px;
      height: 36px;
      margin-left: -18px;
      background: url("../../../images/icon_close.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .no-data {
    position: static;
  }
</style>
